<template>
    <div class="con">
        <div class="header">
            <img src="../../assets/images/home/header.png" alt="" class="toutu">
            <img src="../../assets/images/home/head.png" alt="" class="head">
            <div class="info">
                  <p>{{accountName}} ({{phone}})</p>
                 <span>普通用户</span>
            </div>
        </div>
        <div class="main">
            <img src="../../assets/images/home/bg.png" alt="" class="bg">
            <img src="../../assets/images/home/title.png" alt="" class="title">
            <div class="text">
                <p>做任务奖励VIP会员立享费率 <span>{{(data.memRate*100).toFixed(2)}}%+{{data.memFee}}</span> 费率</p>
                <p>当前费率{{(data.rate*100).toFixed(2)}}%+{{data.fee}}</p>
            </div>
        </div>
  
    </div>
</template>

<script>
export default {
    name: "vip",
    data() {
        return {
            timestamp: "",
            accountName:"",
            phone:"",
            data:{}
        };
    },

    methods: {
 
    },
    mounted() {
        this.timestamp = Date.parse(new Date());
              
            this.accountName = localStorage.getItem("accountName");
            this.phone = localStorage.getItem("loginphone");
            this.phone = `${this.phone.substring(
                0,
                3
            )}****${this.phone.substring(this.phone.length - 3)}`;


        this.axios({
            method: "post",
            url: `${
                this.siteUrl
            }/h5/getPayInfo?appid=web.2019&format=json&timestamp=${
                this.timestamp
            }`,
           
        })
            .then(response => {
                console.log(response);
                if(response.data.success==1){
                this.data = response.data.data;

                }else{
                    this.$toast(response.data.message);

                }
            })
            .catch(error => {
                console.log(error);
                this.$toast("连接服务器异常");
            });

    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.con {
    width: 100%;
    min-height: 100vh;
 background: #2D3659;
}

.con .header .toutu {
    width: 100%;
    position: relative;
}
.con .header .head {
    width: 44px;
    position: absolute;
    left: 15px;
    top:15px;
}
.con .header .info {
    position: absolute;
    left: 70px;
    top:18px;
    color:#fff
}
.main{
    position: relative;
}

.main .bg{
    width: 100%;
}
.main .title{
    width: 80%;
    position: absolute;
    top:20px;
    left: 10%;
}
.main .text{
    width: 80%;
    position: absolute;
    bottom:70px;
    left: 10%;
   height: 147px;
    background: #fff;
  
}
.main .text p{
    margin-left: 20px;

}
.main .text p span{
    color:#FF724F
}
.main .text p:first-child{
    margin-top: 50px;
}
.main .text p:last-child{
    color:#999999;
    font-size: 12px;
}


</style>
